<template>
  <div class="notice-list">
    <div v-if="list.length > 0" class="notice-items">
      <NoticeItem
        v-for="item in list"
        :key="item.id"
        :notice-item="item"
        @refresh="handleRefresh"
      />
    </div>
    <el-empty v-else :description="emptyText" :image-size="80" />
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";
import type { NoticeListItem } from "./types";
import NoticeItem from "./NoticeItem.vue";

defineProps({
  list: {
    type: Array as PropType<NoticeListItem[]>,
    default: () => []
  },
  emptyText: {
    type: String,
    default: "暂无通知"
  }
});

const emit = defineEmits(["refresh"]);

const handleRefresh = () => {
  emit("refresh");
};
</script>

<style lang="scss" scoped>
.notice-list {
  .notice-items {
    max-height: 500px;
    overflow-y: auto;
  }
}
</style>
